import React, { Fragment, PureComponent } from 'react';
import {
  Modal,
  Card,
  List,
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './BasicList.less';
import { formatWan } from '@/utils/utils';
import { connect } from 'dva';
import moment from 'moment';

const confirm = Modal.confirm;


@connect(({ merchant, loading }) => ({
  merchant,
  loading: loading.models.merchant,
}))
// 查看详情
class DescView extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      lookRecordView: false,
    };
  }

  componentWillMount() {
    const { location: { query }, dispatch } = this.props;
    dispatch({
      type: 'merchant/detail',
      payload: { enterpriseNo: query.enterpriseNo },
    });
  }

  withdraw(e) {
    console.log(e);
    const { location: { query }, dispatch } = this.props;
    confirm({
      title: `确定`,
      content: `你确定全部${e.withdraw}提现?`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'merchant/withdraw',
          payload: { enterpriseNo: query.enterpriseNo, loanNoList: [e.loanNo] },
          callback(res) {
            dispatch({
              type: 'merchant/detail',
              payload: { enterpriseNo: query.enterpriseNo },
            });
            window.open(res.msg.url);
          },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  powerBtnFunc = (permissionNo, dom) => {
    const powerBtn = JSON.parse(localStorage.getItem('authority-permissions'));
    return powerBtn.map((item) => {
      if (item.permissionNo === permissionNo) {
        return dom;
      }
    });
  };
  //
  // handleStandardTableChange = (pagination, filtersArg, sorter) => {
  //   const { dispatch } = this.props;
  //   const { formValues } = this.state;
  //
  //
  //   this.setState({
  //     pagination: {
  //       pageNo: pagination.current,
  //       pageSize: 15,
  //     },
  //   });
  //   const params = {
  //     pageNo: pagination.current,
  //     pageSize: 15,
  //     ...formValues,
  //   };
  //
  //   dispatch({
  //     type: 'merchant/detail',
  //     payload: params,
  //   });
  // };
  handleStandardTableChange = (pagination, sorter) => {

    console.log(pagination);
    const { dispatch, location: { query } } = this.props;
    console.log(12, pagination);
    this.setState({
      pagination: {
        pageNo: pagination,
        enterpriseNo: query.enterpriseNo,
        pageSize: 15,
      },
    });
    const params = {
      enterpriseNo: query.enterpriseNo,
      pageNo:pagination,
      pageSize: 15,
    };
    dispatch({
      type: 'merchant/detail',
      payload: params,
    });
  };

  render() {
    console.log(333, this.props);
    const { merchant: { details, pagination }, loading } = this.props;
    const data = details;
    const page = {
      ...pagination,
      onChange: (page) => this.handleStandardTableChange(page),
    };
    const ListContent = ({ data: { amount, interestTime, withdrawAmount, withdraw } }) => (
      <div className={styles.listContent}>
        <div className={styles.listContentItem}>
          <span>可提现金额</span>
          <p>{withdraw}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>已提现金额</span>
          <p>{withdrawAmount}</p>
        </div>
      </div>
    );

    return (
      <div className={styles.standardList}>

        <PageHeaderWrapper title="放款管理">

          <Card>

            <List
              size="large"
              rowKey="loanNo"
              loading={loading}
              pagination={page}
              dataSource={data ? data.data : []}
              renderItem={item => (
                <List.Item
                  actions={[
                    this.powerBtnFunc('100111', <a onClick={e => {
                      e.preventDefault();
                      this.withdraw(item);
                    }}>
                      提现
                    </a>),

                  ]}
                >
                  <List.Item.Meta
                    title={<a href={item.href}>融资金额:{item.amount}</a>}
                    description={moment(item.interestTime).format('YYYY-MM-DD')}
                  />
                  <ListContent data={item}/>
                </List.Item>
              )}
            />

          </Card>

        </PageHeaderWrapper>

      </div>
    );
  }
}

export default DescView;
